<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-02-01 10:16:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-01 11:36:53
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 500px;
      height: 500px;
      background-color: skyblue;
      margin: 30px;
      overflow: hidden;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;
      margin: 30px;
      overflow: hidden;
    }

    span {
      display: block;
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 30px;
    }


    ul {
      width: 300px;
      height: 300px;
      padding: 30px;
      border: 30px solid #333;
      background-color: green;
      background-clip: content-box;

      border-top-width: 50px;
      border-left-width: 100px;
    }
  </style>
</head>
<body>

  <!--
    一个元素的父级
      + 结构父级: 按照 html 结构标准, 写在该标签的外层标签
      + 定位父级: 假设你要给该标签设置绝对定位的时候, 根据谁来定位, 谁就是定位父级
  -->
  <div>
    <p>
      <span></span>
    </p>
  </div>


  <ul></ul>


  <script>
     var spanEle = document.getElementsByTagName('span')[0];
     console.log('定位父级',spanEle.offsetParent);
    // 定位父级是body  

    // span 距离 p 的外边距是30  
    // p 距离 div 的外边距是30 
    // div 距离 body 的外边距是30 

    // 所以span这个元素的offsetLeft = 30+30+30 
     console.log(spanEle.offsetLeft);
     console.log(spanEle.offsetTop);

    var ulEle = document.querySelector('ul');
     console.log(ulEle.clientLeft); // 左边框的宽度
     console.log(ulEle.clientTop); //  上边框的宽度 


  </script>
</body>
</html>